<template>
  <view class="index-container">
    <view class="section-card">
      <view
        class="section-card-cell"
        style="display: flex; justify-content: flex-start"
      >
        <view class="section-cell-title"> 省市县：</view>
        <view class="section-cell-select u-flex u-flex-between" @click="openCityPicker()">
          <view>{{ cityInfo.areaName }}</view>
          <up-icon name="arrow-down" color="#666" size="20"></up-icon>
        </view>
      </view>
      <up-picker
        :show="cityShow"
        ref="uPickerRef"
        :columns="cityArr"
		keyName="label" 
		@change="changeHandler"
        @confirm="onCityConfirm"
        @cancel="cityShow = false"
      ></up-picker>
      <!-- <view class="section-card-cell">
        <view class="section-cell-btn">
          <up-icon
            name="plus-circle"
            color="#666"
            size="22"
            @click="goNav('add', 'comapny')"
          ></up-icon>
        </view>
        <view class="section-cell-select">
          <searchSelect
            :selectInfo="companyInfo"
            :columns="companyData"
            @onSelect="onCompanySelect"
          >
          </searchSelect>
        </view>
        <view class="section-cell-btn">
          <up-icon
            name="eye"
            color="#666"
            size="22"
            @click="goNav('detail', 'comapny')"
          ></up-icon>
        </view>
      </view> -->
      <view class="section-card-cell mt-20">
        <view class="section-cell-btn">
			<up-icon name="plus-circle" color="#666" size="22" @click="goNav('add', 'energyStation')"></up-icon>
		</view>
      
        <view class="section-cell-select">
          <searchSelect
            :selectInfo="energyStationInfo"
            :columns="energyStationData"
            @onSelect="onEnergyStationSelect"
          ></searchSelect>
        </view>
        <view class="section-cell-btn">
          <up-icon
            name="eye"
            color="#666"
            size="22"
            @click="goNav('detail', 'energyStation')"
          ></up-icon>
        </view>
      </view>
    </view>
    <view class="section-card mt-20">
      <view class="section-card-title flex justify-between align-item-center">
        <view class="text"> <view class="line"></view>锅炉信息 </view>
        <view class="flex">
          <up-button
            text="复制"
            color="#0e8fe5"
            size="small"
            :plain="true"
            shape="circle"
            custom-style="margin-right:20rpx;"
            @click="goCopy('boiler')"
          ></up-button>
          <up-button
            color="#0e8fe5"
            text="添加锅炉"
            size="small"
            shape="circle"
            @click="navigateTo('add', 'boiler', '')"
          ></up-button>
        </view>
      </view>
      <view class="section-card-body mt-20">
        <up-row
          gutter="10"
          customStyle="flex-wrap:wrap;"
          v-if="boilerData.length > 0"
        >
          <up-col span="6" v-for="(item, index) in boilerData" :key="index">
            <view
              class="card-item-rows"
              @click="navigateTo('detail', 'boiler', item.id)"
            >
              <view
                v-if="item.checkStatus"
                class="card-item-check"
                :class="{ warnColor: item.checkStatus == '审核不通过' }"
              >
                {{ item.checkStatus }}
              </view>
              <view v-else class="card-item-check zhengshiColor">
                正式数据
              </view>
              <view>{{ item.code }}</view>
            </view>
          </up-col>
        </up-row>
        <view class="no-scope" v-else>暂无数据</view>
      </view>
    </view>

    <view class="section-card mt-20">
      <view class="section-card-title flex justify-between align-item-center">
        <view class="text"> <view class="line"></view>新能源信息 </view>
        <view class="flex">
          <up-button
            text="复制"
            color="#0e8fe5"
            size="small"
            :plain="true"
            shape="circle"
            custom-style="margin-right:20rpx;"
            @click="goCopy('newEnergy')"
          ></up-button>
          <up-button
            color="#0e8fe5"
            text="添加新能源"
            size="small"
            shape="circle"
            @click="navigateTo('add', 'newEnergy', '')"
          ></up-button>
        </view>
      </view>
      <view class="section-card-body mt-20">
        <up-row
          gutter="10"
          customStyle="flex-wrap:wrap;"
          v-if="newEnergyData.length > 0"
        >
          <up-col span="6" v-for="(item, index) in newEnergyData" :key="index">
            <view
              class="card-item-rows"
              @click="navigateTo('detail', 'newEnergy', item.id)"
            >
              <view
                v-if="item.checkStatus"
                class="card-item-check"
                :class="{
                  warnColor: item.checkStatus == '审核不通过',
                }"
              >
                {{ item.checkStatus }}
              </view>
              <view v-else class="card-item-check zhengshiColor">
                正式数据
              </view>
              <view>{{ item.name }}</view>
            </view>
          </up-col>
        </up-row>
        <view class="no-scope" v-else>暂无数据</view>
      </view>
    </view>

    <view class="section-card mt-20">
      <view class="section-card-title flex justify-between align-item-center">
        <view class="text"> <view class="line"></view>热表信息 </view>
        <view class="flex">
          <up-button
            text="复制"
            color="#0e8fe5"
            size="small"
            :plain="true"
            shape="circle"
            custom-style="margin-right:20rpx;"
            @click="goCopy('heatMeter')"
          ></up-button>
          <up-button
            color="#0e8fe5"
            text="添加热表"
            shape="circle"
            size="small"
            @click="navigateTo('add', 'heatMeter', '')"
          ></up-button>
        </view>
      </view>
      <view class="section-card-body mt-20">
        <up-row
          gutter="10"
          customStyle="flex-wrap:wrap;"
          v-if="heatMeterData.length > 0"
        >
          <up-col span="6" v-for="(item, index) in heatMeterData" :key="index">
            <view
              class="card-item-rows"
              @click="navigateTo('detail', 'heatMeter', item.id)"
            >
              <view
                v-if="item.checkStatus"
                class="card-item-check"
                :class="{
                  warnColor: item.checkStatus == '审核不通过',
                }"
              >
                {{ item.checkStatus }}
              </view>
              <view v-else class="card-item-check zhengshiColor">
                正式数据
              </view>

              <view> {{ item.materCode }}</view>
            </view>
          </up-col>
        </up-row>
        <view class="no-scope" v-else>暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getProjectData,
  queryCompany,
  queryEnergyStation,
  quergyBoiler,
  quergyNewEnergy,
  queryHeatMeter,
} from '@/api/company';
import searchSelect from '@/components/searchSelect/searchSelect.vue';
import { areaData } from '../../common/cityData';
export default {
  components: {
    searchSelect,
  },
  data() {
    return {
      cityInfo: {
        province: '',
        city: '',
        county: '',
        areaName: '请选择省市县',
      },
      cityArr: [
        [],
        [],
        [],
      ],
      cityShow: false,
      companyInfo: {}, //选中公司
      companyData: [], //公司
      energyStationData: [], //能源站
      energyStationInfo: {},
      boilerData: [], //锅炉
      newEnergyData: [], //热泵
      heatMeterData: [], //热表
    };
  },
  onLoad() {

  },
  onShow() {
    this.initDatas()
  },
  methods: {
	  initDatas(){
		  const { companyInfo, energyStationInfo } = getApp().globalData;
		  // this.companyInfo = companyInfo;
		  this.energyStationInfo = energyStationInfo;
		  if (JSON.stringify(this.energyStationInfo) !== '{}') {
		    const {province,city,county}=energyStationInfo;
		    this.cityInfo.province=province;
		    this.cityInfo.city=city;
		    this.cityInfo.county=county;
		    this.cityInfo.areaName=province&&city&&county?`${province}/${city}/${county}`:"";
		    this.getProjectList();
		  }
	  },
    // async initData() {
    // 	await this.getCompanyData();
    // 	await this.getEnergyStationData();
    // 	this.getBoilerData();
    // 	this.getNewEnergyData();
    // 	this.getHeatMeterData();
    // },
	openCityPicker(){
		this.cityArr[0].push(...areaData);
		this.cityArr[1].push(...this.cityArr[0][0].children)
		this.cityArr[2].push(...this.cityArr[1][0].children);
		this.cityShow=true;
	},
	changeHandler(e) {
		const {columnIndex,value}=e;
		let city=value[0].children;
		if (columnIndex === 0) {
			this.$refs.uPickerRef.setColumnValues(1, city);
			this.$refs.uPickerRef.setColumnValues(2, city[0].children);
		}else if(columnIndex === 1){
			this.$refs.uPickerRef.setColumnValues(2, value[1].children);
		}
	},
    onCityConfirm(e) {
      const { value } = e;
      this.cityInfo.province = value[0].label;
      this.cityInfo.city = value[1].label;
      this.cityInfo.county = value[2].label;
      this.cityInfo.areaName =  `${value[0].label}/${value[1].label}/${value[2].label}`;
      this.cityShow = false;
      this.energyStationData = [];
      this.energyStationInfo = {};
	  getApp().globalData.energyStationInfo ={};
      this.getProjectList();
    },
    async getProjectList() {
      const params = Object.assign({}, this.cityInfo, {
        pageNum: 1,
        pageSize: 1000,
      });
	  delete params.areaName;
      
      const res = await getProjectData(params);
      const { records } = res;
      this.energyStationData = records || [];

	  if(JSON.stringify(this.energyStationInfo) == '{}'){
		  this.energyStationInfo = records.length > 0 ? records[0] : {};
		  getApp().globalData.energyStationInfo = this.energyStationInfo;
	  }
	  this.initBoilerEnergyMeter();
    },
    // 获取公司数据
    // async getCompanyData() {
    //   const res = await queryCompany({
    //     pageNum: 1,
    //     pageSize: 1000,
    //   });
    //   const { records } = res;
    //   this.companyData = records || [];

    //   if (JSON.stringify(this.companyInfo) === '{}') {
    //     this.companyInfo = records[0];
    //     getApp().globalData.companyInfo = this.companyInfo;
    //   }
    // },
    // async onCompanySelect(row) {
    //   this.companyInfo = row;
    //   getApp().globalData.companyInfo = row;
    //   this.energyStationData = [];
    //   this.energyStationInfo = {};
    //   await this.getEnergyStationData();
    //   this.getBoilerData();
    //   this.getNewEnergyData();
    //   this.getHeatMeterData();
    // },
    // // 获取能源站数据
    // async getEnergyStationData() {
    //   const res = await queryEnergyStation(this.companyInfo.id, {
    //     checkTag: 1,
    //   });

    //   this.energyStationData = res || [];
    //   if (JSON.stringify(this.energyStationInfo) === '{}') {
    //     this.energyStationInfo = res.length > 0 ? res[0] : {};
    //     getApp().globalData.energyStationInfo = this.energyStationInfo;
    //   }
    // },
    onEnergyStationSelect(row) {
      this.energyStationInfo = row;
      getApp().globalData.energyStationInfo = row;
	  this.initBoilerEnergyMeter()
    },
	initBoilerEnergyMeter() {
	   if(JSON.stringify(this.energyStationInfo) == '{}'){
		   this.boilerData=[];
		   this.newEnergyData=[];
		   this.heatMeterData=[];
		   return;
	   }
	  this.getBoilerData();
	  this.getNewEnergyData();
	  this.getHeatMeterData();
	},
    /**查询锅炉**/
    async getBoilerData() {
      const { id = '' } = this.energyStationInfo;
      const res = await quergyBoiler(id, {
        checkTag: 1,
      });

      this.boilerData = res || [];
    },
    /**查询新能源**/
    async getNewEnergyData() {
      const { id = '' } = this.energyStationInfo;

      const res = await quergyNewEnergy(id, {
        checkTag: 1,
      });

      this.newEnergyData = res || [];
    },
    /**查询热表**/
    async getHeatMeterData() {
      const { id = '' } = this.energyStationInfo;
      const res = await queryHeatMeter(id, {
        checkTag: 1,
      });

      this.heatMeterData = res || [];
    },
    /**
     * 页面跳转
     */
    goNav(type, name) {
      if (name === 'comapny') {
        uni.navigateTo({
          url:
            '/pages/company/company?type=' +
            type +
            '&companyId=' +
            this.companyInfo?.id,
        });
      } else {
        const stationId = this.energyStationInfo.id;
        if (type!=='add'&&!stationId) {
          uni.showToast({
            title: '请选择能源站',
            icon: 'none',
          });
          return;
        }
        const info = {
          companyId: type=='add'?'':this.energyStationInfo.companyId,
          id: stationId,
		  ...this.cityInfo
        };

        uni.navigateTo({
          url:
            '/pages/energyStation/energyStation?type=' +
            type +
            '&stationInfo=' +
            encodeURIComponent(JSON.stringify(info)),
        });
      }
    },
    navigateTo(type, property, id) {
      const stationId = this.energyStationInfo.id;
      if (!stationId) {
        uni.showToast({
          title: '请选择能源站',
          icon: 'none',
        });
        return;
      }
      let info = {
        companyId: this.energyStationInfo.companyId,
        stationId: this.energyStationInfo.id,
        id: id || '',
      };
      if (property == 'boiler') {
        uni.navigateTo({
          url:
            '/pages/boiler/boiler?type=' +
            type +
            '&boilerInfo=' +
            encodeURIComponent(JSON.stringify(info)),
        });
      } else if (property == 'newEnergy') {
        uni.navigateTo({
          url:
            '/pages/newEnergy/newEnergy?type=' +
            type +
            '&energyInfo=' +
            encodeURIComponent(JSON.stringify(info)),
        });
      } else {
        uni.navigateTo({
          url:
            '/pages/heatMeter/heatMeter?type=' +
            type +
            '&meterInfo=' +
            encodeURIComponent(JSON.stringify(info)),
        });
      }
    },
    /**复制**/
    goCopy(type) {
      const info = {
        companyId: this.energyStationInfo.companyId,
        stationId: this.energyStationInfo.id,
      };
      uni.navigateTo({
        url:
          '/pages/copy/copy?type=' +
          type +
          '&info=' +
          encodeURIComponent(JSON.stringify(info)),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index-container {
  width: 100%;
  min-height: 100vh;
  padding: 20rpx;
  background-color: #f8f8f8;
  box-sizing: border-box;
}

.no-scope {
  width: 100%;
  height: 180rpx;
  line-height: 180rpx;
  text-align: center;
  color: #999;
}

.section-card {
  width: 100%;
  padding: 20rpx;
  border-radius: 12rpx;
  background: #fff;
  box-sizing: border-box;

  &-cell {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .section-cell-select {
      flex: 1;
      background-color: #f6f6f6;
      padding: 20rpx;
      border-radius: 8rpx;
      margin:0 20rpx;
      overflow: hidden;
    }

    .section-cell-btn {
    }
  }

  &-title {
    font-size: 34rpx;
    font-weight: bold;
    padding: 20rpx 0;

    .text {
      .line {
        width: 5px;
        height: 15px;
        border-radius: 10px;
        display: inline-block;
        margin-right: 20rpx;
        vertical-align: -2rpx;
        background-color: #0e8fe5;
      }
    }
  }

  &-body {
    .card-item-rows {
      width: 100%;
      // background: #f0f9ff;
      background-color: #f6f6f6;
      margin: 14rpx 0;
      padding: 42rpx 24rpx 32rpx 24rpx;
      border-radius: 16rpx;
      box-sizing: border-box;
      color: #333;
      position: relative;

      .card-item-check {
        position: absolute;
        top: 0;
        right: 0;
        padding: 8rpx 10rpx;
        background-color: #f60;
        // background-color: #f9ae3d;
        font-size: 12px;
        color: #fff;
        font-weight: bold;
        border-radius: 0 12rpx 0 12rpx;

        &.warnColor {
          background-color: #f56c6c;
        }

        // &.successColor {
        //   background-color: #0e8fe5;
        // }
        &.zhengshiColor {
          background-color: #4caf50;
        }
      }
    }
  }
}

.cityInput {
  flex: 1;
  background: #f6f6f6;
  background-color: #f6f6f6;
  padding: 20rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
